<template>
  <div class="action">
    <van-button
      v-show="['success'].includes(status)"
      size="large"
      color="#4586FF"
      class="link-button"
    >查看支付订单</van-button>

    <van-row v-show="['error'].includes(status)" :gutter="11">
      <van-col span="12">
        <van-button size="large" color="#cedef7" class="link-button">
          <span :style="{ color: '#4586FF' }">查看支付订单</span>
        </van-button>
      </van-col>
      <van-col span="12">
        <van-button size="large" color="#4586FF" class="link-button">重新支付</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button, Col, Row } from 'vant'

Vue.use(Button)
  .use(Col)
  .use(Row)

export default {
  props: {
    status: {
      type: String,
      required: true,
      validator: e => ['success', 'error'].includes(e)
    }
  }
}
</script>

<style lang="less" scoped>
.action {
  .link-button {
    border-radius: 5px;
    font-size: 18px;
  }
}
</style>